<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>接水果</title>
    <script src="./lufylegend-1.10.1.js"></script>
    <script>
        //如果是L打头的方法 或者类 就说明是这个框架自带的

        //判断是否为手机端
        if(LGlobal.canTouch)
        {
            //将屏幕设置为全屏充满
            LGlobal.stageScale = LStageScaleMode.EXACT_FIT;
            LSystem.screen(LStage.FULL_SCREEN);
        }
    </script>
</head>
<body>
    <!-- 游戏主画面 -->
    <div id="legend"></div>
</body>
</html>
<script>
    
    //游戏的初始化   初始化完毕后会运行主函数main
    init(10,'legend',800,450,main);

    //初始化一些变量 和 一些游戏的素材
    var imgData = [
        {name:"back",path:"./images/back.jpg"},
        {name:"player",path:"./images/player.png"},
        {name:"item0",path:"./images/item0.png"},
        {name:"item1",path:"./images/item1.png"},
        {name:"item2",path:"./images/item2.png"},
        {name:"item3",path:"./images/item3.png"},
        {name:"item4",path:"./images/item4.png"},
        {name:"item5",path:"./images/item5.png"},
        {name:"item6",path:"./images/item6.png"},
        {name:"item7",path:"./images/item7.png"}
    ]

    var imglist;  //放素材
    // 背景层、人物层、物品层、游戏结束层、游戏素材加载层 ps图层
    var backLayer,playerLayer,itemLayer,overLayer,LoadingLayer;
    //人物
    var hero;
    //人物速度
    var step=50,stepindex=50;
    //积分
    var point = 0,pointTxt;
    //生命值
    var hp = 3,hpTxt;


    //主函数
    function main()
    {
        //实例化一个进度条
        LoadingLayer = new LoadingSample4()

        //将进度条放入到舞台里面
        addChild(LoadingLayer)

        //设置加载进度
        LLoadManage.load(
            imgData,  //素材
            function(progress) //设置进度
            {
                // console.log(progress)
                //每次都需要重新设置进度
                LoadingLayer.setProgress(progress)
            },
            gameInit  //当素材加载完毕后，执行的回调函数
        )
    }

    function gameInit(result)
    {
        //将loading 层舞台删除掉
        removeChild(LoadingLayer)
        
        //素材保存起来
        imglist = result

        //先创建一个背景层
        backLayer = new LSprite()

        //将背景图层放到舞台上面 空的图层
        addChild(backLayer)

        //给背景图层加背景图
        addBackground();

        //添加人物到背景层
        addPlayer();

        //增加物品层

        //创建物品层
        itemLayer = new LSprite()

        //把物品层添加到背景层当中
        backLayer.addChild(itemLayer)


        //事件绑定，让人物和物体都运动起来
        addEvent();


        //添加显示的积分文本
        addText();
    }

    //显示积分和生命值
    function addText()
    {
        //创建一个文本层
        hpTxt = new LTextField()

        //设置生命值颜色为红色
        hpTxt.color = '#ff0000';

        //字体大小
        hpTxt.size = 30;

        //xy坐标
        hpTxt.x = 10;
        hpTxt.y = 10;

        //创建一个积分文本
        pointTxt = new LTextField()

        //积分设置颜色
        pointTxt.color = '#fff'

        //字体大小
        pointTxt.size = 30

        pointTxt.x = 10
        pointTxt.y = 50;

        backLayer.addChild(hpTxt)
        backLayer.addChild(pointTxt)

        //更新文本内容
        showText()

    }

    //显示分数
    function showText()
    {
        hpTxt.text = "生命值："+hp
        pointTxt.text = "积分："+point
    }

    //事件绑定
    function addEvent()
    {
        //LEvent.ENTER_FRAME 播放事件
        //让背景层里面所有的元素进行播放
        backLayer.addEventListener(LEvent.ENTER_FRAME,onframe)
        
        //鼠标的按下
        backLayer.addEventListener(LMouseEvent.MOUSE_DOWN,onDown)

        //鼠标的弹起
        backLayer.addEventListener(LMouseEvent.MOUSE_UP,onUp)
    }

    //定义播放函数
    function onframe()
    {
        hero.run();

        //循环让物体层里面所有的物体全部动起来
        for(var i=0;i<itemLayer.childList.length;i++)
        {
            //让物体层里面的元素全部动起来
            itemLayer.childList[i].run();

            //如果元素的模式 等于 die 说明要销毁他
            if(itemLayer.childList[i].mode == "die")
            {
                itemLayer.removeChild(itemLayer.childList[i])
            }
        }

        //添加下落的物品 每秒下落一个新物品
        if(stepindex++ > 50)
        {
            stepindex = 0;
            addItem();
        }

        //增加显示积分和生命值的方法
        showText()

        if(hp <= 0)
        {
            gameOver()
            return false
        }
        
    }

    //创建一个游戏结束方法
    function gameOver()
    {
        //背景的所有元素全部停掉
        backLayer.die()

        //删除掉物品层里面所有的下落物品
        itemLayer.removeAllChild();

        //创建一个游戏结束的文本
        var txt = new LTextField();

        //设置颜色
        txt.color = '#ff0000';

        txt.size = 50;

        txt.text = '游戏结束'

        //中间位置
        txt.x = (LGlobal.width - txt.getWidth())/2;
        txt.y = 100;

        //创建一个游戏结束层
        overLayer = new LSprite()

        //先把游戏结束层放到背景层
        backLayer.addChild(overLayer)

        //将文本放到层里面去
        overLayer.addChild(txt)

        //给游戏结束层绑定点击事件重新开始游戏
        backLayer.addEventListener(LMouseEvent.MOUSE_DOWN,function(){
            //将背景里面的所有内容干掉
            backLayer.die()
            
            //将游戏结束层里面的内容全部清空
            overLayer.removeAllChild()

            //重新开始游戏
            hp = 10;
		    point = 0;

            addEvent();
        })
    }

    //添加下落的物品
    function addItem()
    {
        //创建一个物体的对象
        var item = new Item();
        
        //Math.floor
        item.x = 20 + Math.floor(Math.random() * (LGlobal.width - 50))
        itemLayer.addChild(item)
    }

    //创建一个物体对象
    function Item()
    {
        //继承一个层对象
        base(this,LSprite,[])

        //保存作用域
        var self = this 

        //设置模式
        self.mode = ''

        //随机获取一个图片出来 取小整  0 ~ 7 随机选取一个下标
        var index = Math.floor(Math.random() * 8)

        //到底是加分还是减分
        self.value = index < 4 ? 1 : -1

        //根据下标去把图片找到  index = 4 item4 imglist['item4']
        // imglist['item'+index]
        var bitmap = new LBitmap(new LBitmapData(imglist["item"+index]))

        self.addChild(bitmap)
    }

    //物体下落过程 
    Item.prototype.run = function()
    {
        //保存作用域
        var self = this

        //每次下落5像素
        self.y += 3;

        //如果有碰撞的话 也要销毁 返回true 有碰撞 false没有碰撞
        var hit = self.checkHit();

        //说明物体已经超出了屏幕范围
        if(hit || self.y > LGlobal.height)
        {
            //把物体销毁掉
            self.mode = 'die'
        }
    }

    //给物体增加一个检测碰撞方法
    Item.prototype.checkHit = function()
    {
        //先把自己保存起来
        var self = this

        //将两个对象看作圆来检测碰撞 LGlobal.hitTestArc
        //如果返回true 说明碰撞到了
        if(LGlobal.hitTestArc(self,hero))
        {
            if(self.value > 0)
            {
                point += 1;  //加分
            }else{
                //减生命值
                hp -= 1;
            }

            //确实有碰撞
            return true;
        }

        //没有碰撞
        return false;
    }

    //定义鼠标按下事件
    function onDown(event)
    {
        if(event.selfX < LGlobal.width / 2)
        {
            //设置元素的属性为 left
            hero.mode = 'left'

            //在给他设置一组专门的动画
            hero.anime.setAction(1)
        }else{
            hero.mode = 'right'

            //在给元素设置一组动画
            hero.anime.setAction(2)
        }
    }

    //定义鼠标的弹起事件
    function onUp(event)
    {
        //松开的时候让元素超前
        hero.mode = '';

        hero.anime.setAction(0);
    }


    //自定义一个背景方法
    function addBackground()
    {
        //创建一个图片对象，并且将这个图片对象放到背景图层
        // 1、创建图片对象并加载

        // new LBitmap 创建一个img标签
        // new LBitmapData(imglist['back']) img src="data:image/png"
        //imglist['back']  获取到的是背景图片素材
        // console.log(imglist['back']);
        var bitmap = new LBitmap(new LBitmapData(imglist['back']))

        //将图片塞到背景图层里面
        backLayer.addChild(bitmap)
    }


    //自定义一个人物层对象
    function addPlayer()
    {
        //创建一个图层
        playerLayer = new LSprite();

        //将人物图层插入到背景图层里面
        backLayer.addChild(playerLayer)

        //生成一个人物
        hero = new Player()

        //设置坐标点
        hero.x = hero.y = 350

        //将角色放到人物层里面去
        playerLayer.addChild(hero)
    }

    //定义一个角色对象
    function Player()
    {
        //让角色也继承一下图层关系
        base(this,LSprite,[])  //base = 继承

        //保存作用域区间
        var self = this

        //往左边 往右边
        self.mode = ""

        //将人物精灵图切割
        //将传入的宽和高，按照行数和列数进行拆分计算，会得到一个2维数组。
        // 256 × 256  4 x 4
        var list = LGlobal.divideCoordinate(256,256,4,4);

        //默认取了一张图片
        var data = new LBitmapData(imglist['player'],0,0,64,64)

        //设置一组动画  self 自己 data 显示的这张图 list 动画的效果数组
        self.anime = new LAnimation(self,data,list)

        //设置动作
        self.step = 10, self.stepindex = 0
    }

    //给人物扩展一个方法，让人物运动起来
    Player.prototype.run = function()
    {
        //作用域保存
        var self = this;

        //判断是否有到达动作的最后一位
        if(self.stepindex++ > self.step)
        {
            //将动作变化第一张
            self.stepindex = 0;

            //播放下一贞动画
            self.anime.onframe();
        }

        if(self.mode == "left")
        {
            //往左边走
            if(self.x > 10)
            {
                self.x -= 5; //self.x = self.x - 10
            }
        }
        else if(self.mode == "right")
        {
            //往右边走 判断是否有达到边界部分
            if(self.x < LGlobal.width - self.getWidth())
            {
                self.x += 5; //self.x = self.x + 10
            }
        }
    }
</script>